import React from 'react'
import { useNavigate } from 'react-router-dom';
import { ArrowLeft } from '@nutui/icons-react';

export default function SmailPage() {
    //navigate
    const navigate = useNavigate()
    return (
        <div>
            {/* <input type='color'/> */}
            <div className='linear-gradient-bg'>
            <p style={{ width: '100vw', padding: '15px', boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{
                    padding: '15px 10px',
                    boxSizing: 'border-box',
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <ArrowLeft onClick={() => {
                        navigate.go(-1)
                    }} />
                </span>
                <span style={{
                    padding: '5px 10px',
                    boxSizing: 'border-box',
                    color: 'white',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    borderRadius: '7px',
                    background: '#808080',
                }}>跳过</span></p>

            <div style={{
                width: '80%',
                margin: '0 auto',
                height: '320px',
                background: 'rgba(254,207,59,0.2)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center'
            }}>
                <div style={{
                    width: '80%',
                    margin: '0 auto',
                    height: '260px',
                    background: 'rgba(254,207,59,0.3)',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center'
                }}>

                    <div style={{
                        width: '80%',
                        margin: '0 auto',
                        height: '200px',
                        background: 'rgba(254,207,59,0.8)',
                        borderRadius: '50%',
                        display: 'flex',
                        alignItems: 'center'
                    }}>
                        <img src='/img/2.jpg' style={{
                        width: '50%',
                        margin: '0 auto',
                        borderRadius: '50%'
                    }} />
                    </div>

                </div>

            </div>
            <div style={{height:'auto',marginTop:'50px'}}>
            <p style={{textAlign:'center',fontSize:'30px',fontWeight:'bold'}}>恭喜你，注册成功！</p>
            <p style={{color:'gray',textAlign:'center',fontSize:'13px',marginTop:'7px'}}>可使用人脸进行快捷登录</p>
            <p style={{
                textAlign:'center',
                marginTop:'50px'
            }}>
                <button style={{
                    padding:'7px 15px',
                    background:'white',
                    borderRadius:'7px'
                }} onClick={()=>{
                    navigate('/steer')
                }}>开始新体验！</button>
            </p>
            </div>
            </div>
        </div>
    )
}
